<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new</title>
    <script src="{% static "js/jquery.min.js" %}"></script>
</head>
<body>
<input type="button" value="上一条" onclick="skiptop()">
<input type="button" value="首页" onclick="skip(0)">
<input type="button"value="下一条" onclick="skiptom()"><br>
<b>title:</b><span id="idtitle"></span><br>
<b>content:</b><span id="idcontent"></span>
<script>
    var an = 0
    function skiptop(){
        an -= 1;
        $.get('/demo/ajax/',function (data) {
            $("#idtitle").html(data[an].title);
            $("#idcontent").html(data[an].contect);
        })
    }
     function skiptom(){
        an += 1;
        $.get('/demo/ajax/',function (data) {
            $("#idtitle").html(data[an].title);
            $("#idcontent").html(data[an].contect);
        })
    }
     function skip(id){

        $.get('/demo/ajax/',function (data) {
            $("#idtitle").html(data[id].title);
            $("#idcontent").html(data[id].contect);
            an = 0
        })
    }
</script>
</body>
</html>